<template>
  <el-tag :type="tagType" :effect="effect">
    {{ statusText }}
  </el-tag>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 状态值
  status: {
    type: [Number, String],
    required: true
  },
  // 状态类型：normal(正常/禁用), review(审核状态), course(课程状态), certification(认证状态)
  type: {
    type: String,
    default: 'normal'
  },
  // 标签效果
  effect: {
    type: String,
    default: 'light'
  }
})

// 计算标签类型
const tagType = computed(() => {
  switch (props.type) {
    case 'normal':
      return props.status === 1 || props.status === 'active' ? 'success' : 'danger'
    case 'review':
      switch (props.status) {
        case 'approved':
        case 1:
          return 'success'
        case 'rejected':
        case 0:
          return 'danger'
        default:
          return 'warning'
      }
    case 'course':
      return props.status === 1 || props.status === 'published' ? 'success' : 'danger'
    case 'certification':
      switch (props.status) {
        case 2: return 'success'  // 已认证
        case 3: return 'danger'   // 未通过
        case 1:
        default: return 'warning' // 待认证
      }
    default:
      return 'info'
  }
})

// 计算状态文本
const statusText = computed(() => {
  switch (props.type) {
    case 'normal':
      return props.status === 1 || props.status === 'active' ? '正常' : '禁用'
    case 'review':
      switch (props.status) {
        case 'approved':
        case 1:
          return '正常'
        case 'rejected':
        case 0:
          return '禁用'
        default:
          return '待审核'
      }
    case 'course':
      return props.status === 1 || props.status === 'published' ? '正常' : '禁用'
    case 'certification':
      switch (props.status) {
        case 2: return '已认证'
        case 3: return '未通过'
        case 1:
        default: return '待认证'
      }
    default:
      return '未知'
  }
})
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
